<template>
  <div class="i-table-no-border">
    <Button
      v-hasC="{ name: 'rbac-module-create', flag: 'v1/rbac/module/create' }"
      type="primary"
      icon="md-add"
      @click="handleOpenCreate"
      >新建</Button
    >
    <Table highlight-row
      size="small"
      ref="table"
      :columns="columns"
      :data="list"
      :loading="loading"
      class="ivu-mt"
    >
      <template slot-scope="{ row }" slot="status">
        <Badge v-if="row.status === '1'" status="success" text="启用" />
        <Badge v-if="row.status === '0'" status="error" text="禁用" />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <a
          v-hasC="{ name: 'rbac-module-update', flag: 'v1/rbac/module/update' }"
          @click="handleUpdate(row, index)"
          >编辑</a
        >
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="total"
        :current.sync="current"
        show-total
        show-elevator
        :page-size="size"
        @on-change="handleChangeSize"
        :page-size-opts="pageOpts"
        show-sizer
        @on-page-size-change="changePageSize"
      />
    </div>
    <Modal
      v-model="showCreate"
      :title="title"
      :mask-closable="false"
      :loading="creating"
      @on-ok="handleCreate"
    >
      <Form
        ref="create"
        :model="createMenuData"
        :rules="createRules"
        :label-width="100"
      >
        <FormItem label="模块名称：" prop="name">
          <Input
            v-model="createMenuData.name"
            placeholder="请输入模块名称"
            clearable
          />
        </FormItem>
        <FormItem label="模块链接：" prop="url">
          <Input
            v-model="createMenuData.url"
            placeholder="请输入模块链接"
            clearable
          />
        </FormItem>
        <FormItem label="模块Icon：" prop="class_style">
          <Input
            v-model="createMenuData.class_style"
            placeholder="请输入Icon类名"
            clearable
          />
        </FormItem>
        <FormItem label="排序：" prop="sort">
          <Input v-model="createMenuData.sort" placeholder="请输入排序大小" />
        </FormItem>
        <FormItem label="模块状态：">
          <Switch v-model="createMenuData.status" size="large">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </Switch>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  GetModuleList,
  CreateModuleMenu,
  updateModuleMenu,
} from "@/api/TApi/index.js";

export default {
  data() {
    return {
      columns: [
        {
          title: "模块名称",
          key: "name",
          minWidth: 100,
        },
        {
          title: "模块Icon",
          key: "class_style",
          minWidth: 160,
        },
        {
          title: "url路径",
          key: "url",
          minWidth: 140,
        },
        {
          title: "排序",
          key: "sort",
          minWidth: 50,
        },
        {
          title: "状态",
          slot: "status",
          minWidth: 60,
        },
        {
          title: "创建时间",
          key: "created_at_str",
          minWidth: 140,
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 80,
        },
      ],
      loading: false,
      list: [],
      pageOpts: [10, 20, 30, 50],
      moduleList: [],
      parentMenuList: [],
      current: 1,
      size: 10,
      total: 0,
      showCreate: false,
      createMenuData: {
        name: "",
        url: "",
        parent_menu_id: "",
        module_id: "",
        class_style: "",
        status: true,
        sort: "",
      },
      createRules: {
        name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
        url: [{ required: true, message: "请输入模块连接", trigger: "blur" }],
        class_style: [
          { required: true, message: "请输入模块Icon", trigger: "blur" },
        ],
        sort: [
          {
            message: "排序必须是正数",
            pattern: /^[+]{0,1}(\d+)$/,
            trigger: "blur",
          },
        ],
        module_id: [{ required: true, message: "请选择模块", trigger: "blur" }],
        status: [
          { required: true, message: "请输入模块状态", trigger: "blur" },
        ],
      },
      creating: true,
      updateIndex: -1,
      editing: true,
      title: "新增",
    };
  },
  methods: {
    getData() {
      this.loading = true;
      GetModuleList({
        pageSize: this.size,
        page: this.current,
      })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取父级模块
    getParentMenuList(moduleId) {
      GetParentMenus({ id: moduleId }).then((res) => {
        this.parentMenuList = res.menu_list;
      });
    },
    handleSelectModule(value) {
      // 选中模块
      if (!value) return false;
      this.getParentMenuList(value);
    },
    // 点击切换分页
    handleChangeSize(currentPage) {
      this.current = currentPage;
      this.getData();
    },
    changePageSize(e) {
      this.size = e;
      this.getData();
    },
    // 切换状态
    handlechangeType(id, type) {
      this.$Modal.confirm({
        title: "警告",
        content: "是否确认" + (type === 1 ? "开启" : "关闭") + "该模块？",
        onOk: () => {
          ChangeTypeMenu({
            id: id,
            status: type,
          }).then(() => {
            this.getData();
            this.$Message.success("修改成功");
          });
        },
      });
    },
    // 点击新增
    handleOpenCreate() {
      this.updateIndex = -1;
      this.showCreate = true;
      this.title = "新增";
      this.$nextTick(() => {
        this.$refs["create"].resetFields();
      });
      // this.getParentMenuList(0);
    },
    // 新增数据
    handleCreate() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          let sendData = JSON.parse(JSON.stringify(this.createMenuData));
          sendData.status = sendData.status === true ? "1" : "0";
          delete sendData.module_id;
          delete sendData.parent_menu_id;
          if (this.updateIndex < 0) {
            // 新建
            CreateModuleMenu(sendData).then((res) => {
              // 创建模块成功后，刷新页面
              this.showCreate = false;
              this.getData();
              this.$Message.success("创建模块成功");
            });
          } else {
            // 修改
            updateModuleMenu(sendData).then((res) => {
              // 修改模块成功后，刷新页面
              this.showCreate = false;
              this.getData();
              this.$Message.success("修改成功");
            });
          }
          this.creating = false;
          this.$nextTick(() => {
            this.creating = true;
          });
        } else {
          this.creating = false;
          this.$nextTick(() => {
            this.creating = true;
          });
        }
      });
    },
    // 编辑数据
    handleUpdate(data, index) {
      this.showCreate = true;
      this.updateIndex = index;
      this.title = "编辑";
      for (let key in this.createMenuData) {
        this.createMenuData[key] = data[key];
      }
      this.createMenuData.status = this.createMenuData.status === "1";
      this.createMenuData.id = data.id;
    },
  },
};
</script>
